Não é porque toda imagem que podemos encontrar no google é grátis que poderemos utilizar no nosso site desenvolvido de maneira profissional, corremos dessa maneira o risco de sermos processados pelos proprietários dessas imagens e termos grandes perdas por isso, dessa forma, é muito importante aprender a estar atento a isso desde o início. Muito obrigado Gustavo Guanabara por essas dicas tão valiosas, elas podem nos evitar a perder tempo, dinheiro, noites de sono mal dormidas e evitar também possíveis dores de cabeça.
Existem 4 formas de desenvolver seu site de maneira profissional e evitando futuros processos judiciais:
Para conseguir imagens de uso público no google, pode-se ir na opção ferrementas → direitos de imgens → Marcadas para reutilização com modificação.
O aplicativo utilizado para as modificações de tamanhos das imagens foi o GIMP na qual pode ser o download nesse site: https://www.gimp.org/downloads/thanks.html. Nele, vai-se na opção: "Imagens → rendimencionar imagens → largura e rendimensionar a imagem desejada (se o símbolo de elo de corrente estiver fechado, basta digitar o tamanho da largura e pressionar a tecla TAB e então o programa redimensiona também a altura automaticamente).
Imagens com entre 200 e 1500 px de largura e com resolução de 50 a 72 px já está muito bom para o site, mas geralmente se encontram nas páginas da internet, imagens com 600-650 px. Para salvar a imagem redimensionada, vai-se na opção Arquivos → exportar como (Ctrl + Shift + E, caso não queira sobrescrever a imagem) → Com qualidade entre 70 a 100 %. Todo esse trabalho para reduzir alguns KBs faz grandes diferenças quando temos milhares de acessos simultâneos.
A tag para colocar uma foto é: <img src="foto" alt="Texto alternativo">. Para escrever a tag no visual studio code, basta digitar "img" e teclar ENTER, e para selecionar uma foto que esteja na mesma pasta que o arquivo index.html basta colocar o cursor do teclado entra as aspas do parâmetro src e pressionar Ctrl+espaço e selecionar a foto. Para voltar uma pasta, usa-se o comando "../".
Os textos alternativos, mesmo não parecendo muito útil eles ajudam bastante na indexação do nosso site em mecanismos de busca, ajudam na acessibilidades aos usuário deficiêntes, como os deficiêntes visuais por exemplo e auxiliam o Google a identificar o que tem dentro do nosso site e exibilas nos resultados de busca do Google Imagens.
Favicons são aquelas pequenas imagens, ícones que aparecem ao lados dos nossos títulos na aba de navegação, seu formato é .ico e podem serem baixados ou feitos nos seguintes sites:
Para colocar um favicon em nosso site, colocar a tag <link:favico> acima do <title> como no exemplo abaixo:
1<!DOCTYPE html>
2<html lang="pt-br">
3<head>
4 <meta charset="UTF-8">
5 <meta http-equiv="X-UA-Compatible" content="IE=edge">
6 <meta name="viewport" content="width=device-width, initial-scale=1.0">
7 <link rel="shortcut icon" href="favicon.ico" type="imagen/x-icon">
8 <title>Capítulo 6 - imagens</title>
9</head>
10<body>
11</body>
12</html>
Os Favicons podem serem feitos nos formatos .ico, .png e .svg que é vetorizado e seria a melhor opção, mas como nem todo navegador é compatível com esse formato, é aconselhável que se utilize o formato .ico.